<template>
	<div class="cart">
		<nav-bar class="nav-bar">
			<div slot="center">购物车({{cartLength}})</div>
		</nav-bar>
		<!-- 商品列表 -->
		<cart-list></cart-list>
		<!-- 底部汇总 -->
		<cart-bottom-bar></cart-bottom-bar>
	</div>
</template>

<script>
	import CartList from './childcomps/CartList'
	import CartBottomBar from './childcomps/CartBottomBar'

	import NavBar from 'components/common/navbar/NavBar'

	import {mapGetters} from 'vuex'//语法：获取vuex中getters

	export default {
		name: 'Cart',
		components: {
			CartList,
			CartBottomBar,
			NavBar
		},
		computed: {
			...mapGetters(['cartLength'])//得到getters中的cartLength
		}
	}
</script>

<style>
	.cart {
		height: 100vh;
	}

	.nav-bar {
		background-color: var(--color-tint);
		color: #fff;
	}
</style>